//登录页 —— 属于有状态组件（是否显示登录密码）
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter_secure_storage/flutter_secure_storage.dart';
import 'package:http/http.dart';
import 'package:toastification/toastification.dart';
import 'package:zhihuishequ/constants/ui_constants.dart';
import '../constants/api_constants.dart';

class LoginPage extends StatefulWidget {
  const LoginPage({super.key});

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  var phoneCtrl = TextEditingController(); //用于绑定到“电话”输入框的编辑控制器
  var pwdCtrl = TextEditingController(); //用于绑定到“密码”输入框的编辑控制器
  String phone = ''; //电话输入框中的内容
  String pwd = ''; //密码输入框中的内容
  bool hidePwd = true; //是否隐藏密码（即用圆饼来代替每个字符）

  @override
  void initState() {
    super.initState();
    //生命周期方法：初始化当前组件所用的数据
    phoneCtrl.text = '13501234567';
    phone = phoneCtrl.text;
    pwdCtrl.text = '123456';
    pwd = pwdCtrl.text;
  }

  @override
  Widget build(BuildContext context) {
    //页面组件与普通组件不同点：根组件一般是Scaffold
    return Scaffold(
      //首页对应的是一个页面脚手架组件
      appBar: AppBar(
        toolbarHeight: 0, //不显示工具栏(左侧图标+中央标题+右侧图标)
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: EdgeInsets.all(20),
          child: Column(
            //Column容器宽度要靠内容撑起来，高度为100%
            // mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              SizedBox(height: 80),
              //F1: LOGO图片
              Image.asset(
                'assets/img/logo.png',
                width: 260,
                height: 260,
                fit: BoxFit.cover,
              ),

              //F2: 手机号输入框组
              SizedBox(height: 20),
              TextField(
                controller: phoneCtrl,
                decoration: InputDecoration(
                  //输入框装饰
                  contentPadding: EdgeInsets.all(0),
                  hintText: '请输入手机号码', //占位用的提示文字
                  hintStyle: TextStyle(color: Colors.black45),
                  // labelText: '手机号'                 //标签文字，类似于占位文字，但不会消失而是移动左上角去
                  // helperText: '请输入'                //输入助手/提示文字
                  border: OutlineInputBorder(
                    borderSide: BorderSide.none, //边框边缘设定
                    borderRadius: BorderRadius.all(Radius.circular(10)), //边框圆角
                    // gapPadding: 10,      //内边距空缺
                  ),
                  // border: InputBorder.none,       //取消边框，同时取消圆角
                  filled: true, //是否填充颜色
                  fillColor: Color(0xFFF0F0F0), //指定填充颜色（即背景色）
                  // icon: Icon(Icons.phone_android_sharp),  //显示在输入框外部左侧的图标
                  prefixIcon: Icon(
                    //前缀图标
                    Icons.phone_android_sharp,
                    color: UIConstants.COLOR_THEME_GREEN,
                  ),
                  // suffixIcon: Icon(        //Icon不具备“单机事件”处理能力
                  //   Icons.cancel,
                  //   color: UIConstants.COLOR_THEME_BLUE,
                  // ),
                  suffixIcon: IconButton(
                    onPressed: () => phoneCtrl.clear(), //点击x图标按钮后，清空输入框中的内容
                    icon: Icon(
                      Icons.cancel,
                      color: UIConstants.COLOR_THEME_BLUE,
                    ),
                  ),
                ),
                onChanged: (val) => phone = val, // 处理“输入框内容改变”事件
              ),

              //F3: 密码输入框组
              SizedBox(height: 20),
              TextField(
                controller: pwdCtrl,
                obscureText: hidePwd, //是否隐藏文本（即密码输入）
                decoration: InputDecoration(
                  //输入框装饰
                  contentPadding: EdgeInsets.all(0),
                  hintText: '请输入登录密码', //占位用的提示文字
                  hintStyle: TextStyle(color: Colors.black45),
                  border: OutlineInputBorder(
                    borderSide: BorderSide.none, //边框边缘设定
                    borderRadius: BorderRadius.all(Radius.circular(10)), //边框圆角
                  ),
                  filled: true, //是否填充颜色
                  fillColor: Color(0xFFF0F0F0), //指定填充颜色（即背景色）
                  prefixIcon: Icon(
                    //前缀图标
                    Icons.lock,
                    color: UIConstants.COLOR_THEME_GREEN,
                  ),
                  suffixIcon: IconButton(
                    onPressed: () =>
                        setState(() => hidePwd = !hidePwd), //TODO: 在睁眼和闭眼间切换
                    icon: Icon(
                      hidePwd ? Icons.visibility_off : Icons.visibility,
                      color: UIConstants.COLOR_THEME_BLUE,
                    ),
                  ),
                ),
                onChanged: (val) => pwd = val, // 处理“输入框内容改变”事件
              ),

              //F4: 登录按钮
              SizedBox(height: 30),
              SizedBox(
                width: double.infinity,
                height: 50,
                child: ElevatedButton(
                  onPressed: () async {
                    //① 校验用户名输入是否合法 - AlertDialog
                    //② 校验密码输入是否合法 - AlertDialog
                    //③ 提交输入给服务器端接口，进行服务器端验证
                    var url = APIConstants.userLogin;
                    var res = await post(
                      Uri.parse(url),
                      headers: {'Content-Type': 'application/json'},
                      body: jsonEncode({'phone': phone, 'pwd': pwd}),
                    );
                    var body = jsonDecode(res.body);
                    print('登录结果：$body');
                    //登录成功：{code: 2000, msg: login succ, token: xxxxx}
                    if (body['code'] == 2000) {
                      //①登录成功，弹出吐司对话框
                      toastification.show(
                        context: context,
                        title: Text('欢迎回来：${phone}'),
                        type: ToastificationType.success,   //对话框类型，将决定图标/颜色
                        alignment: Alignment.bottomCenter,  //对话框出现位置
                        autoCloseDuration: Duration(seconds: 3),  //多久后自动关闭
                        closeButton: ToastCloseButton(
                          showType: CloseButtonShowType.none  //不显示关闭按钮
                        ),
                        backgroundColor: Colors.black,    //背景色
                        foregroundColor: Colors.white,    //文字颜色
                        style: ToastificationStyle.simple //修改对话框显示样式
                      );
                      //② 在客户端缓存登录后得到的“身份令牌”
                      var storage = FlutterSecureStorage();
                      storage.write(key: 'userToken', value: body['token']);
                      //③ 替换跳转到首页
                      Navigator.pushReplacementNamed(context, '/home');
                    } else {
                      //登录失败，弹出警告框
                      showDialog(
                        context: context,
                        builder: (context) => AlertDialog(
                          title: Text('错误'),
                          content: Text('登录失败！\r\n服务器返回错误消息：${body["msg"]}'),
                          actions: [
                            TextButton(
                              onPressed: () => Navigator.pop(context),  //“关闭对话框”就是“返回历史记录栈中的上一页”
                              child: Text('确定'),
                            ),
                          ],
                        ),
                      );
                    }
                  },
                  style: ElevatedButton.styleFrom(
                    //提示：此处如果直接使用ButtonStyle类型就非常麻烦了
                    backgroundColor: UIConstants.COLOR_THEME_GREEN,
                  ),
                  child: Text(
                    '登     录',
                    style: TextStyle(color: Colors.white, fontSize: 16),
                  ),
                ),
              ),
              //F5: 忘记密码
              // Text(          //Text没有“单击事件”处理能力
              //   '忘记密码',
              //   style: TextStyle(color: UIConstants.COLOR_THEME_BLUE),
              // ),
              TextButton(
                onPressed: () => print('跳转到找回密码页面'),
                child: Text(
                  '忘记密码',
                  style: TextStyle(color: UIConstants.COLOR_THEME_BLUE),
                ),
              ),
            ],
          ),
        ),
      ), //内边距为20
    );
  }
}
